<template>
  <view class="tabbar-wrap">
    <view class="tabbar-box">
      <view class="box flex-column" @tap="tapMenu(0)">
        <view class="icon iconfont icon-map" :class="{ select: select === 1 }"></view>
        <text :class="{ 'select-text': select === 1 }">地图</text>
      </view>
      <view class="box flex-column" @tap="tapMenu(1)">
        <view class="icon iconfont icon-list" :class="{ select: select === 2 }"></view>
        <text :class="{ 'select-text': select === 2 }">列表</text>
      </view>
      <view v-if="appType !== 'lznt'" class="box flex-column" @tap="tapMenu(4)">
        <view v-if="!order.isCharge" class="scan-box">
          <view class="scan"></view>
          <view class="icon-line"></view>
        </view>
        <view v-else class="charge-box">
          <view class="icon iconfont icon-charge"></view>
          <view class="charge"></view>
        </view>
        <text :class="{ 'select-text': select === 4 }">扫码充电</text>
      </view>
      <view v-else class="box box1 flex-column">
        <view class="code-wrap">
          <!-- 背景梯形 -->
          <view class="bg"></view>
          <!-- 扫码 -->
          <view class="row row1" @tap.stop="tapMenu(4)">
            <view v-if="!order.isCharge" class="scan-box">
              <view class="scan"></view>
              <view class="icon-line"></view>
            </view>
            <view v-else class="charge-box" @tap.stop="tapMenu(4)">
              <view class="icon iconfont icon-charge"></view>
              <view class="charge"></view>
            </view>
            <text>扫码充电</text>
          </view>
          <!-- 快捷码 -->
          <view class="row" @tap.stop="tapShortCode">
            <view class="icon iconfont icon-code"></view>
            <text>快捷码充电</text>
          </view>
        </view>
      </view>
      <view class="box flex-column" @tap="tapMenu(2)">
        <view class="icon iconfont icon-order" :class="{ select: select === 3 }"></view>
        <text :class="{ 'select-text': select === 3 }">订单</text>
      </view>
      <view class="box flex-column" @tap="tapMenu(3)">
        <view class="icon iconfont icon-me" :class="{ select: select === 4 }"></view>
        <text :class="{ 'select-text': select === 4 }">我的</text>
      </view>
    </view>
    <DialogShortCode ref="dialogShortCodeRef"></DialogShortCode>
  </view>
</template>

<script lang="ts" setup>
import { getToken, getUserId, getMoreCharge } from '@/mixins/info';
import { handleCode } from '@/utils/util';
import { getUserCurrentOrder } from '@/service/apis/order';
import DialogShortCode from './dialogShortCode.vue';

const appType = import.meta.env.VITE_VUE_APP_TYPE;

interface Props {
  select: Number;
}
const prop = withDefaults(defineProps<Props>(), {
  select: Number || 1,
});

// 判断是否有实时订单
const order = reactive({
  isCharge: false,
  id: '',
});
const getUserOrder = () => {
  getUserCurrentOrder(userId, true).then((res: any) => {
    if (res) {
      order.isCharge = true;
      order.id = res;
    } else {
      order.isCharge = false;
      order.id = '';
    }
  });
};
const userId = getUserId();
onShow(() => {
  if (userId && !getMoreCharge()) {
    getUserOrder();
  }
});

// 菜单点击事件
let arr = [
  '/pages/stationMap/stationMap',
  '/pages/stationList/stationList',
  '/pages/order/order',
  '/pages/mine/mine',
];
const tapMenu = (type: number) => {
  if (type === 4) {
    // 扫码
    const token = getToken();
    if (!token) {
      uni.navigateTo({
        url: `/pages/login/login?page=${arr[Number(prop.select) - 1]}`,
      });
      return;
    }
    if (!getMoreCharge()) {
      handleCode(false, order);
    } else {
      handleCode(false);
    }
  } else {
    if (type > 1 && type !== 3) {
      const token = getToken();
      if (!token) {
        uni.navigateTo({
          url: `/pages/login/login?page=${arr[Number(prop.select) - 1]}`,
        });
        return;
      }
    }
    // 切换菜单
    uni.switchTab({
      url: arr[type],
    });
  }
};

// 终端快捷码
const dialogShortCodeRef = ref();
const tapShortCode = () => {
  const token = getToken();
  if (!token) {
    uni.navigateTo({
      url: `/pages/login/login?page=${arr[Number(prop.select) - 1]}`,
    });
    return;
  }
  dialogShortCodeRef.value?.open();
};
</script>

<style lang="scss">
.tabbar-wrap {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 77px;
  background-color: #fff;
  border-top: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: 0 5px 10px 5px #d9d9d9;
  z-index: 1;
  // bottom: constant(safe-area-inset-bottom);
  // bottom: env(safe-area-inset-bottom);

  .tabbar-box {
    height: 64px;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
  }
  .box {
    justify-content: center;
    align-items: center;
    width: 20%;
    text-align: center;
    color: #858585;
    font-size: 12px;

    text {
      height: 14px;
      line-height: 14px;
    }

    .select-text {
      color: #000;
    }

    .icon {
      width: 20px;
      height: 20px;
      margin-bottom: 6px;
      font-size: 20px;
      color: rgba(113, 141, 246, 0.3);
    }

    .select {
      color: $uni-color-primary;
    }

    .charge-box {
      position: relative;
      width: 20px;
      height: 20px;
      margin: 0 auto 6px;
      .icon-charge {
        position: absolute;
        top: 2px;
        font-size: 24px;
        transform: rotate(-90deg);
      }
      .charge {
        position: absolute;
        width: 8px;
        height: 0px;
        top: 19px;
        left: 9px;
        background-color: $uni-color-primary;
        animation: move-charge 2s linear infinite;
      }
      @keyframes move-charge {
        0% {
          height: 0px;
          top: 19px;
        }
        100% {
          height: 17px;
          top: 2px;
        }
      }
    }

    .scan-box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 20px;
      height: 20px;
      margin: 0 auto 5px;
      background: linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) left top,
        linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) left top,
        linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) right top,
        linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) right top,
        linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) left bottom,
        linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) left bottom,
        linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) right bottom,
        linear-gradient(rgba(113, 141, 246, 0.3), rgba(113, 141, 246, 0.3)) right bottom;
      background-repeat: no-repeat;
      background-size: 1px 5px, 5px 1px;
    }
    .scan {
      width: 14px;
      height: 14px;
      background: rgba(212, 219, 245, 0.3);
    }

    .icon-line {
      position: absolute;
      width: 20px;
      height: 1px;
      background: rgba(113, 141, 246, 0.3);
      animation: move 3s linear infinite;
    }
    @keyframes move {
      0% {
        top: 0px;
      }
      50% {
        top: 20px;
      }
      100% {
        top: 0px;
      }
    }
  }
}

.tabbar-wrap .box1 {
  width: 40%;

  .charge-box {
    margin-right: 15px;
    .charge {
      position: absolute;
      width: 7px;
      height: 0px;
      top: 20px;
      left: 9px;
      background-color: $uni-color-primary;
      animation: move-charge 2s linear infinite;
    }
    @keyframes move-charge {
      0% {
        height: 0px;
        top: 20px;
      }
      100% {
        height: 17px;
        top: 3px;
      }
    }
  }

  .code-wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 40%;
    height: 104px;
    top: -27px;

    .bg {
      position: absolute;
      top: -3px;
      left: 0;
      height: 30px;
      width: 100%;
      // background-color: #fff;
      // clip-path: polygon(30px 0, 130px 0, 160px 40px, 0 40px);
      background-image: url($url + 'menu-bg.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .row {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      font-size: 15px;
      margin: 0 auto;
      color: $uni-color-primary;
      z-index: 1;

      &.row1 {
        margin-top: 10px;
        border-bottom: 1px solid #d4dbf5;
      }
    }

    .icon-charge {
      margin-right: 15px;
    }

    .scan-box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 22px;
      height: 22px;
      margin-right: 15px;
      background: linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) left top,
        linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) left top,
        linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) right top,
        linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) right top,
        linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) left bottom,
        linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) left bottom,
        linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) right bottom,
        linear-gradient(rgba(113, 141, 246, 1), rgba(113, 141, 246, 1)) right bottom;
      background-repeat: no-repeat;
      background-size: 2px 8px, 8px 2px;
      border-radius: 3px;
    }
    .scan {
      width: 15px;
      height: 15px;
      background: rgba(212, 219, 245, 0.8);
    }

    .icon-line {
      position: absolute;
      width: 22px;
      height: 2px;
      background: rgba(113, 141, 246, 1);
      animation: move 3s linear infinite;
    }
    @keyframes move {
      0% {
        top: 4px;
      }
      50% {
        top: 17px;
      }
      100% {
        top: 4px;
      }
    }

    .icon-code {
      margin-right: 10px;
      font-size: 22px;
      color: $uni-color-primary;
    }
  }
}
</style>